
import BaseCard from "coms/baseCard";
import BaseContent from "coms/baseContent"
import BaseShare from "coms/baseShare"
// Share
import { recommebdList, tagsList, knowledge } from '@/api/article';
// import './index.less';
import { EyeOutlined } from '@ant-design/icons';
import { useNavigate } from "react-router-dom";

const ArticleView = () => {
  const navigate = useNavigate();

  // 点击 推荐阅读 跳详情
  const toDetaiil = (id) => {
    navigate(`/article/${id}`)
  }
  return (
    <div className="artbox">
      {/* 左侧内容  传入调用的各自的接口*/}
      <BaseContent
        request={async () => {
          const { data: { data } } = await knowledge();
          return {
            data,

          }
        }}
      >
        {
          (item, index) => {
            return <div key={index} className={"itemList"} >
              <h2 onClick={() => {
                navigate(`/knowledge/${item.id}`)
              }}>{item.title}</h2>

              <dl>
                <dt> <img src={item.cover} alt="" /></dt>
                <dd>
                  <b>{item.summary}</b>
                  <div>
                    <span> <EyeOutlined />{item.views}</span>
                    <span> <BaseShare item={item} /> </span>
                  </div>
                </dd>
              </dl>
            </div>
          }
        }

      </BaseContent>
      {/* 右侧导航 */}
      <div className='card'>
        {/*推荐阅读  */}
        <BaseCard title="推荐阅读"

          request={async () => {
            const { data: { data } } = await recommebdList();
            return {
              data
            }
          }}
        >
          {
            (item, index) => {
              return <p key={index} onClick={() => toDetaiil(item.id)}>{item.title}</p>
            }
          }
        </BaseCard>
        {/*推荐阅读*/}
        <BaseCard title="文章分类"
          className={"tags"}

          request={async () => {
            const { data: { data } } = await tagsList();
            return {
              data
            }
          }}
        >
          {
            (item, index) => {
              return <p key={index}>{item.label}</p>
            }
          }
        </BaseCard>
      </div>

    </div>
  )
}

export default ArticleView;

